<template>
  <div style="text-align: right">
    <el-button icon="el-icon-refresh" @click="refresh()"></el-button>
    <el-button-group v-model="colSelected">
      <el-popover
        placement="bottom-end"
        width="150"
        trigger="hover"
        @show="showPopover"
      >
        <template #reference>
          <el-button icon="el-icon-expand"></el-button>
        </template>
        <div class="checkboxCss">
          <el-checkbox
            v-for="(item, index) in columns"
            :label="item.name"
            :key="item"
            @change="changeColumn($event, index)"
			:checked="item.show"
          />
        </div>
      </el-popover>
    </el-button-group>
  </div>

  <el-table
  	stripe
    :data="data"
    :header-cell-style="{ color: '#666', 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    :fit="true"
    style="width: 100%; font-size: 14px"
    tooltip-effect="dark"
	@selection-change="handleSelectionChange"
  >
  <!-- @selection-change = handleSelectionChange -->
    <!-- 插槽 -->
    <slot></slot>
  </el-table>
</template>

<script>
import { defineComponent,reactive, ref } from "vue";
export default defineComponent({
	name: "MyTable",
	// 去除"组件通信"报错
	emits: ['handleSelectionChange_emit'],
	props: {
    data: Array,
    // 存放表头的内容的数组 数组里是对象 对象里存放的每一项表头名称和show（显示与否）
    columns: {
      type: Array,
      default: () => [],
    },
  },
  setup(props,context){
	//   console.log(props);
	  let showSearchWrap = ref(true)
	  let columnChage = ref(true)
	let colOptions = reactive([])
	let colSelected = reactive([])
	  // 刷新页面
   const  refresh = function() {
      window.location.reload();
    }
	const handleSelectionChange = function(selection){
		 context.emit('handleSelectionChange_emit',selection)
	}
    // 列的显示隐藏
    const showPopover = function() {
      if (!columnChage.value) {
        props.columns.map((item) => {
          colOptions.push(item.name);
        });
        colSelected = props.columns.map((item) => {
          if (item.show) {
            return item.name;
          }
        });
        columnChage.value = true;
      }
    }
    // 选择列
    const changeColumn = function(show, index) {
      let columns = props.columns;
      columns.map((item, i) => {
        if (index === i) {
          item.show = show;
        }
      });
    }
	return{
		props,
		showSearchWrap,
		columnChage,
		colOptions,
		colSelected,
		refresh,
		showPopover,
		changeColumn,
		handleSelectionChange,
	}
  }

})

</script>

<style lang="scss" scoped>
.checkboxCss {
  display: flex;
  flex-direction: column;
}
</style>
